/**
* @Author: 李晨光
* @Date: 2019/12/4
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/4
**/
<comment>
  属性：multiple   类型 ： Boolean   默认值： false
  属性：lists   类型 ： Array   默认值： []  数据格式： [{label: '1',
                                                      value: '1',
                                                      disabled: false,
                                                      checked: false,
                                                      hasChecked: true,
                                                      hasChildren: true
                                                    }]
  v-model  : [{label: '1',
                value: '1',
                disabled: false,
                checked: false,
                hasChecked: true,
                hasChildren: true
              }]
  事件：
  change  值发生变化
  expand  展开下级
  unexpand  收起下级
</comment>
<template>
  <div id="OrgTreeThrough">
    <!--顶部面包屑导航 选择结果-->
    <Search ref="search" :open="serchOpen" @open="openSerch" :lists="searchLists" @confirm="searchConfirm" @search="search">
      <!-- <template slot="search-item" slot-scope="test">
      </template> -->
    </Search>
    <mu-list>
      <mu-list-item style="width: 100%;overflow-x: auto;">
        <mu-breadcrumbs divider="—" tag="li">
          <mu-icon value="chevron_right" slot="divider"></mu-icon>
          <mu-breadcrumbs-item  v-for="item in navs" :key="item.label" :disabled="item.disabled">
            <li class="navs"  @click="unexpand(item)">{{item.label}}</li>
          </mu-breadcrumbs-item>
        </mu-breadcrumbs>
      </mu-list-item>
    </mu-list>
    <!--数据列-->
    <div class="list" style="height: calc(100vh - 1.66rem);overflow: auto;margin-top: 10px">
      <mu-list style="height:100%;overflow-y: auto">
        <mu-list-item v-for="(list, index) in lists" button style="margin-bottom: 1px;" :key="index"
                      @click="select(list)">
          <template v-if="list.hasChecked">
            <mu-checkbox v-if="multiple" v-model="list.checked" :value="list.value" :label="list.label"></mu-checkbox>
            <mu-radio v-else v-model="check" :value="list.value" :label="list.label"></mu-radio>
          </template>
          <mu-list-item-title v-if="!list.hasChecked">{{list.label}}</mu-list-item-title>
          <div style="width: .2rem;position: absolute;right: 1rem;" v-if="!list.hasChecked">
            <i v-show="check == list.value" class="iconfont iconxuanze" style="color: #24D90C;"></i>
          </div>
          <mu-list-item-action @click.stop="expand(list)" v-if="list.hasChildren">
              <i class="iconfont iconzuzhi"></i>
              下级
          </mu-list-item-action>
        </mu-list-item>
      </mu-list>
    </div>

    <!--选择结果-->
    <mu-list class="fiexd-b" v-if="multiple">
      <mu-list-item>
        <span class="primary-color">已选: {{this.checkedString}}</span>
        <mu-button color="primary" @click="confirm">
          确 定
        </mu-button>
      </mu-list-item>
    </mu-list>
  </div>
</template>

<script>
  import Search from "@/search/SearchOrg.vue"

  export default {
    name: 'OrgTreeThrough',
    components: {
      Search
    },
    props: {
      orgType:{
        type: String,
        default: "all"
      },
      // 是否多选
      multiple: {
        type: Boolean,
        default: false
      },
      // 原数据 数组
      lists: {
        type: Array,
        default: () => {
          return []
        }
      },
      // 选择结果
      checked: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    model: {
      prop: "checked",
      event: "change"
    },
    data() {
      return {
        serchOpen:false,
        allChecked: false,
        check: '',
        checkedString: '',
        resLists: [],
        navs: [
          {
            label: '组织',
            value: 'org',
            disabled: true
          }],
        checkedArr: [],
        // 搜索结果
        searchLists: [],
      }
    },
    computed: {},
    created() {
      this.navs = [{
        label: '组织',
        value: 'org',
        disabled: true
      }]
    },
    mounted() {
    },
    watch: {
      lists: {
        handler(newVal, oldVal) {
          this.resLists = newVal
        },
        immediate: true,
        deep: true
      },
      checked: {
        handler(newVal, oldVal) {
          this.checkedArr = newVal
          if (this.checkedArr.length) {
            this.check = this.checkedArr[0].value
          } else {
            this.check = ''
          }
        },
        immediate: true,
        deep: true
      },
    },
    methods: {
      openSerch(isnot){
        this.serchOpen = isnot
      },
      // 选择选项
      select(item) {
        if(item.disabled ) {
          this.$A.MS('当前项不可选')
        }else{
          if (this.multiple) {
            item.checked = !item.checked
            if (item.checked) {
              !this.checkedArr.find(i => i.value == item.value) && this.checkedArr.push(item)
            } else {
              this.checkedArr.splice(this.checkedArr.findIndex(i => i.value == item.value), 1)
            }
          }else{
            this.check = item.value
            this.$set(this.checkedArr, 0, item)
          }
          this.$emit('change', this.checkedArr)
          if(this.multiple) {
            let res = []
            this.checkedArr.length && this.checkedArr.forEach((item, index) => {
              res.push(item.label)
              this.checkedString = res.join(',')
            })
          }else{
            this.$emit('confirm', this.checkedArr)
          }
        }


      },
      /**
       * 展开下级  通过监听expand事件在父组件获取下级数据
       * @param item
       */
      expand(item) {
        if(!this.navs.find(i => i.value == item.value)) {
          this.navs.push({
            label: item.label,
            value: item.value,
            disabled: false,
          })
          this.navs[0].disabled = false
          this.navs[this.navs.length - 2].disabled = false
          this.navs[this.navs.length - 1].disabled = true
          this.$emit('expand', item)
        }
      },
      unexpand(item) {
        this.navs.splice(this.navs.findIndex(i => i.value == item.value) + 1)
        this.$emit('unexpand', item)
      },
      // 选择结果确认
      confirm() {
        this.$emit('confirm', this.checkedArr)
      },

      // 搜索结果点击确认回调
      searchConfirm(ev) {
        // this.closeSearch()
        // this.$emit('confirm', ev)
        console.log(ev)
        this.$emit('confirm', ev)
        this.serchOpen = false;
      },
      // 搜索回调
      async search(ev) {
        console.log(ev,this.orgType)
        let data = await this.getSearchOrg(ev)
        this.searchLists = this.filterOrg(data)
        // this.searchLists = [
        //   {
        //     label: '中建八局南方公司西北分公司北分公司北分公司',
        //     value: '1',
        //     disabled: false,
        //     checked: false,
        //     hasChecked: true,
        //     hasChildren: true
        //   },
        // ]
      },
      //过滤不相关的数据  //orgType
      filterOrg(data){
        
      // all 上级 + 本级 + 下级 基础组织 +  项目(组织、项目可选)
      // allOrg 上级 + 本级 + 下级 基础组织(组织可选)
      // allOrgProject 上级 + 本级 + 下级 基础组织 + 项目  (项目可选)
      // currOrg 本级 + 下级 基础组织(组织可选)
      // currOrgProject 本级 + 下级 基础组织 + 项目(项目可选)
      // allContacts 上级 + 本级 + 下级 基础组织+ 项目 + 参建单位（参建单位可选）
      // currContacts 本级 + 下级 基础组织 + 项目 + 参建单位（参建单位可选）
        let newData = []
        switch (this.orgType) {
          case "all":
            newData = data.filter(o=>o.type != '2')
            break;
          case "allOrg":
            newData = data.filter(o=>o.type == '0')
            break;
          case "allOrgProject":
            newData = data.filter(o=>o.type != '2')
            break;
          case "currOrg":
            newData = data.filter(o=>o.type == '0')
            break;
          case "currOrgProject":
            newData = data.filter(o=>o.type != '2')
            break;
          case "allContacts":
            newData = data
            break;
          case "currContacts":
            newData = data
            break;
          default:
            newData = data
            break;
        }
        return newData;
      },
      //查询组织结构
      async getSearchOrg(name){
        return this.$A.Go('get','/safety/searchOrgs',{name}).then(success=>{
            let data = []
            if(success.code == 200){
              let arr = success.body;
              for(let i=0;i<arr.length;i++){
                arr[i]['label'] = arr[i]['organizationName']
                arr[i]['value'] = arr[i]['id']
                arr[i]['disabled'] = false
                arr[i]['checked'] = false
                arr[i]['hasChildren'] = false
              }
             data =  arr;
            } else {
              this.$A.MS(success.msg)
            }
            return data;
          },
          function(err) {
            return []
            console.warn(err);
          }
        );
      },
    },
    destroyed() {
    }
  }
</script>

<style lang="scss">
  #OrgTreeThrough{
    .list .mu-item-title{
      width: 2.3rem!important;
      flex: unset;
    }
    .navs{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 2.3rem;
      color: #ff8a1b;
    }
    .mu-breadcrumbs-item.is-disabled .navs{
      color: rgba(0,0,0,.38);
    }
    .mu-radio-label{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 2.3rem;
      font-size:0.15rem;
      font-weight:400;
      color:rgba(61,61,61,1);
      line-height:0.21rem;
    }
    .mu-item {
      padding: 0 14px;
      height: .55rem;
      justify-content: space-between;
    }

    .mu-list {
      padding: 0 ;
    }

    .mu-list > li {
      background: #fff;
    }

    .mu-item-action.is-more {
      padding: 0 14px;
      min-width: unset;
      width: .9rem;
      position: absolute;
      right: 0;
      flex-direction: row;
      align-items: center;
      &:after{
        content: '';
        position: absolute;
        left: 0;
        height: .24rem;
        border-left: 2px solid #f0f0f0;

      }

    }

    .mu-breadcrumbs > li {
      font-size: 0.15rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 138, 27, 1);
      .mu-icon {
        font-size: .2rem;
      }
    }

    .mu-breadcrumbs-divider {
      padding: 0 .05rem;
      color: rgba(0, 0, 0, .38);
    }
    .fiexd-b{
      border-top: 1px solid #f8f8f8;
      position: fixed;
      bottom: 0;
      left: 0;
      padding: 0;
    }
    .search{
      width:3.47rem;
      height:0.33rem;
      background:rgba(248,248,248,1);
      border-radius:0.83rem;font-size:0.13rem;
      font-weight:400;
      color:rgba(140,140,140,1);
      text-align: center;
      align-items: center;
      display: flex;
      justify-content: center
    }
  }

</style>
